<template>
	<view class="content">

		<view class="main">

			<view style="display: flex;font-size: 36rpx;">
				<radio-group style="margin: 16rpx 0 20rpx 0;display: flex;" @change="onRadioChange($event,99)">
					<label style="display: flex;align-items: center;">
						<radio style="transform:scale(0.8);" :checked="sex == '1'" value="1"></radio>
						<view v-if="sex == 1" style="color: #007AFF;">扫码核销</view>
						<view v-else>扫码核销</view>
					</label>
					<label style="display: flex;align-items: center;margin: 0 0 0 80rpx;">
						<radio style="transform:scale(0.8)" :checked="sex == '2'" value="2"></radio>
						<view v-if="sex == 2" style="color: #007AFF;">姓名手机号核销</view>
						<view v-else>姓名手机号核销</view>
					</label>
				</radio-group>
			</view>

			<view class="menu_name">优惠券/抵扣券码</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="扫描或输入优惠券码" maxlength="50" :value="verifycode" @input="onInputCode" />
				<view class="btn_wb" @click="onScanCode(1)">扫码</view>
			</view>

			<view class="menu_name">托运单号</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="扫描或输入运单号" maxlength="50" :value="order_sn" @input="onInputOrder" />
				<view class="btn_wb" @click="onScanCode(2)">扫码</view>
			</view>

			<view v-if="sex == 2">
				<view class="menu_name">姓名</view>
				<view style="display: flex;align-items: center;">
					<input class="et_wb_num" placeholder="请输入展会报名姓名" maxlength="50" :value="signname" @input="onInputName" />
				</view>

				<view class="menu_name">手机号</view>
				<view style="display: flex;align-items: center;">
					<input class="et_wb_num" placeholder="请输入展会报名手机号" maxlength="50" :value="phone" @input="onInputPhone" />
				</view>
			</view>

			<view style="display: none;" class="menu_name">详细描述</view>
			<textarea style="display: none;" class="et_desc" placeholder="请输入详细描述" @input="onInputDesc" />

			<view class="btn_ok" @click="onOk">核销</view>

		</view>

	</view>
</template>

<script>
	import { getUInfo, isEmpty } from '@/util/util.js'
	import { chooseAndUploadImg, chooseAndUploadVideo } from '@/util/uni_util.js'
	export default {
		data() {
			return {
				sex: '1', // 核销类型 1 扫码 2 姓名手机号

				verifycode: '', // 扫码得到的优惠券核验码
				order_sn: '', // 扫码得到的运单号
				signname: '', // 姓名
				phone: '', // 手机号

				detail: {}, // 运单详情
				desc: '', // 描述
			}
		},

		mounted() {},

		onLoad(opts) {
			// 扫码
			uni.$on('onGetQrCode', (data) => {
				let type = data.type
				if (type == 1) { // 扫描完优惠券
					let { title, money, verifycode } = JSON.parse(data.qr_code_data)
					this.verifycode = verifycode
				}
				if (type == 2) { // 扫描完托运单
					let { qr_code, od_num, startCity, toCity, goods } = JSON.parse(data.qr_code_data)
					this.order_sn = od_num
				}
			})
		},

		onUnload() {
			uni.$off('onGetQrCode', () => {})
		},

		methods: {

			// 单选框改变事件
			onRadioChange(event, index) {
				this.sex = event.detail.value
			},
			// 监听:输入描述
			onInputDesc(e) {
				this.desc = e.detail.value
			},
			// 监听:输入手机号
			onInputPhone(e) {
				this.phone = e.detail.value
			},
			// 监听:输入姓名
			onInputName(e) {
				this.signname = e.detail.value
			},
			// 监听:输入核验码
			onInputCode(e) {
				this.verifycode = e.detail.value
			},
			// 监听:输入单号
			onInputOrder(e) {
				this.order_sn = e.detail.value
			},
			// 点击:扫码
			onScanCode(type) {
				uni.navigateTo({ url: `/pages/sys/scan_code_zhhx?type=${type}` })
			},

			// 提交上报
			onOk() {
				let that = this
				if (!this.verifycode) {
					uni.showToast({ icon: 'none', title: '请扫描或输入优惠券码', duration: 3600 })
					return
				}
				if (!this.order_sn) {
					uni.showToast({ icon: 'none', title: '请扫描或输入运单号', duration: 3600 })
					return
				}
				// 姓名手机号核销:额外验证姓名和手机号
				if (this.sex == 2) {
					if (!this.signname) {
						uni.showToast({ icon: 'none', title: '请输入姓名', duration: 3600 })
						return
					}
					if (!this.phone) {
						uni.showToast({ icon: 'none', title: '请输入手机号', duration: 3600 })
						return
					}
				}
				uni.showModal({
					title: '提示',
					content: '确认核销？',
					success: (res) => {
						if (res.confirm) {
							// that.sex == 1 && uni.showToast({ icon: 'none', title: '扫码核销', duration: 3600 })
							// that.sex == 2 && uni.showToast({ icon: 'none', title: '姓名手机号核销', duration: 3600 })
							that.sex == 1 && this.uploadData()
							that.sex == 2 && this.postHexiao2()
						}
					}
				})
			},

			// 接口:上传信息
			async uploadData() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '核销中..', mask: true, })
				let res = await that.$postHexiao({ token, order_sn: this.order_sn, verifycode: this.verifycode })
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						confirmText: '继续核销',
						cancelText: '退出',
						success: (res) => {
							if (res.confirm) {
								that.resetData()
							} else {
								uni.switchTab({ url: '/pages/index/index' })
							}
						}
					})
				} else {
					// uni.showToast({ title: res.msg, icon: 'none' })
					uni.showModal({ title: '提示', content: res.msg, showCancel: false })
				}
			},

			// 接口:姓名手机号核销
			async postHexiao2() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '核销中..', mask: true, })
				let phone = that.phone
				let signname = that.signname
				let res = await that.$postHexiao2({ token, order_sn: this.order_sn, verifycode: this.verifycode, phone, signname })
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						confirmText: '继续核销',
						cancelText: '退出',
						success: (res) => {
							if (res.confirm) {
								that.resetData()
							} else {
								uni.switchTab({ url: '/pages/index/index' })
							}
						}
					})
				} else {
					// uni.showToast({ title: res.msg, icon: 'none' })
					uni.showModal({ title: '提示', content: res.msg, showCancel: false })
				}
			},

			// 重置数据
			resetData() {
				this.verifycode = ''
				this.order_sn = ''
				this.signname = ''
				this.phone = ''
			}

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
		/* background-color: #f0f0f0; */
	}

	.main {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		background-color: white;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.menu_name {
		display: flex;
		align-items: center;
		font-weight: bold;
		margin: 36rpx 0 0 0;
	}

	.sub_menu_name {
		margin: 12rpx 0 0 0;
		/* font-size: 28rpx; */
		/* color: #666; */
	}

	.et_wb_num {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_wb {
		width: 25%;
		height: 76rpx;
		line-height: 76rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
		margin: 24rpx 0 0 0;
		border-radius: 12rpx;
		background: #6974DD;
		margin: 24rpx 0 0 12rpx;
	}

	.et_desc {
		width: calc(100% - 48rpx);
		height: 200rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 24rpx;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 60rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}
</style>